<template>
  <div class="register">
    <div class="register1">
      <div>
        注册页面<br />
        账号: <input v-model="num" type="text" />
        <span v-show="flag">输入的账号应在4-10位之间</span><br />
        密码: <input v-model="password" type="password" /><br />
        确认密码: <input v-model="pwd" type="password" /><br />
        <button @click="registers">注册</button>
        <div class="tiao" v-show="flags">
          <div class="tiao1">
            <p v-html="str"></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import http from "../http";
export default {
  data() {
    return {
      num: "",
      password: "",
      pwd: "",
      flag: false,
      flags: false,
      t: 5,
      str: "",
      timer: null,
    };
  },
  watch: {
    num(newValue, oldValue) {
      if (newValue.length < 4 || newValue.length > 10) {
        this.flag = true;
      } else {
        this.flag = false;
      }
    },
  },
  methods: {
    registers() {
      console.log(this.num, this.password);
      if (this.password !== this.pwd) {
        alert("两次输入的密码不一至,请重新输入");
      } else {
        http
          .get("cha", {
            params: {
              num: this.num,
            },
          })
          .then((res) => {
            if (res.data) {
              http
                .post("zheng", {
                  num: this.num,
                  password: this.password,
                })
                .then((date) => {
                  console.log(date);
                  if (date.data === "注册成功") {
                    this.flags = true;
                    this.timer = setInterval(() => {
                      (this.str = `注册成功, ${this.t}秒之内自动跳转登录页面<br><a href="/login">点击直接跳转<a>`),
                        this.t--;
                      if (this.t == 0) {
                        this.$router.push({
                          name: "Login",
                        });
                      }
                    }, 1000);
                  } else {
                    alert("注册失败");
                  }
                });
            } else {
              alert("您输入的账号已存在,请换一个");
            }
          });
      }
    },
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
};
</script>

<style lang="scss" scoped>
span {
  color: red;
}
.tiao {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba($color: #000000, $alpha: 0.4);
  .tiao1 {
    width: 300px;
    height: 300px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.register {
  width: 100%;
  height: 100%;
  background: skyblue;
  position: relative;
  .register1 {
    width: 400px;
    height: 400px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
  }
}
</style>